Menu zentrieren und in mobilier Ansicht verbessern
8 Jahre 3 Monate her - 8 Jahre 3 Monate her #2774
von Bea
Menu zentrieren und in mobilier Ansicht verbessern wurde erstellt von Bea
1. Bei
www.eggi-horgen.ch/cms
habe ich jetzt etwas getestet. Die farbigen Buttons habe ich dank Hilfe von diesem Forum sehr gut hingekriegt. Dass die nun etwas auseinander sind, habe ich mit border-wight geschafft. Ob das der korrekte Weg war weiss ich nicht. Ich hätte die Buttons noch gerne weiter auseinander, bzw. zur Seite zentriert. Verschieben nach rechts ginge noch etwas aber irgendwann hüpft dann ein Punkte auf die nächste Zeile. Kriegt man das zentriert hin?
Ergänzung: Hab das nun mit einem weiteren padding-left und dem Anpassen eines anderen Wertes einigermassen hingekriegt. Ob das so der offizielle Weg ist, keine Ahnung
Aber im Moment funktionierts
2. Die Schrift in den Buttons kann ich farblich wechslen auch etwas schieben. Ich hätte die aber ebenfalls zum Button hin zentriert. Geht das?
Ok, auch das hab ich mit einem text-align: center; hingekriegt. Finde zwar, es sei nicht mittig!
3. Ich habe auf dem Samsung nun mal alles im Chrome angeschaut. Ich kriege zuerst einen schwarzen Balken und erst wenn ich dortrauf klicke, erscheint ein Menu. Dürfte so nicht korrekt sein. Wie kann ich das ändern?
Ergänzung: Hab das nun mit einem weiteren padding-left und dem Anpassen eines anderen Wertes einigermassen hingekriegt. Ob das so der offizielle Weg ist, keine Ahnung
Aber im Moment funktionierts2. Die Schrift in den Buttons kann ich farblich wechslen auch etwas schieben. Ich hätte die aber ebenfalls zum Button hin zentriert. Geht das?
Ok, auch das hab ich mit einem text-align: center; hingekriegt. Finde zwar, es sei nicht mittig!
3. Ich habe auf dem Samsung nun mal alles im Chrome angeschaut. Ich kriege zuerst einen schwarzen Balken und erst wenn ich dortrauf klicke, erscheint ein Menu. Dürfte so nicht korrekt sein. Wie kann ich das ändern?
Letzte Änderung: 8 Jahre 3 Monate her von Bea.
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
- Thomas Hunziker
-
- Offline
- Administrator
-
8 Jahre 3 Monate her #2776
von Thomas Hunziker
1. Betreffend dem Abstand gibt's zwei Varianten: Padding (Innenabstand) und Margin (Aussenabstand). Einfach gesagt ist padding der Abstand innerhalb eines Rahmens und margin der ausserhalb.
Statt deinem schwarzen border könntest du zB
benutzen. Das macht links und rechts jeweils 20px Abstand.
2. Sieht für mich recht mittig aus. text-align:center wär jedenfalls korrekt.
3. Auf Handies wird das Menü "collapsed". Stattdessen wird son "Hamburger" Symbol gezeigt. Dummerweise ist das bei dir schwarz auf schwarzem Grund was kontrastmässig etwas doof ist
Versuchs mal einzufärben:
Farbe natürlich wunschgemäss anpassen
Statt deinem schwarzen border könntest du zB
Code:
ul.menu li {
margin: 0 20px;
}
2. Sieht für mich recht mittig aus. text-align:center wär jedenfalls korrekt.
3. Auf Handies wird das Menü "collapsed". Stattdessen wird son "Hamburger" Symbol gezeigt. Dummerweise ist das bei dir schwarz auf schwarzem Grund was kontrastmässig etwas doof ist
Versuchs mal einzufärben:
Code:
/*@media all and (max-width:979px)*/
nav .navbar .btn-navbar:hover .icon-bar {
background-color: #ff0000;
}
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
8 Jahre 3 Monate her #2777
von Matthias
Matthias antwortete auf Menu zentrieren und in mobilier Ansicht verbessern
Ich habe mir mal die custom.less angesehen und mir erlaubt sie etwas zu optimieren (so ist sie viel kürzer und somit übersichtlicher). Sie sollte ihren Zweck immer noch erfüllen.
Außerdem habe ich noch 1. ergänzt
. Flexbox ist das Stichwort:
wiki.selfhtml.org/wiki/CSS/Eigenschaften...%9Fenangaben/Flexbox
. Die ist etwas dynamischer als margin und padding.
Anmerkungen zur custom.less:
Außerdem habe ich noch 1. ergänzt
. Flexbox ist das Stichwort:
wiki.selfhtml.org/wiki/CSS/Eigenschaften...%9Fenangaben/Flexbox
. Die ist etwas dynamischer als margin und padding.Anmerkungen zur custom.less:
- Wegen der Schatten gibt es den Punkt CSS3-Effects im Backend.
- Die Randfarbe der Menüpunkte kann auch im Backend angepasst werden.
- Angaben, die nicht überschrieben werden, müssen/sollten nicht in der custom.less deklariert werden.
Code:
@charset "utf-8";
/*homepage Eggi, Januar 2017*/
/* Schatten in der Ueberschrift der Modulen ausschalten */
/* Schatten in beim Footer-Text ausschalten */
/*** Text-Shadow kann mit CSS3-Effects deaktiviert werden ***/
.moduleh3-sidebar,
.copytext {
text-shadow: none;
}
/* Subfooter Strick weg */
/*** Box-Shadow kann mit CSS3-Effects deaktiviert werden ***/
#subfoot {
box-shadow: none;
}
/* Schatten im Wrapper ausschalten */
/* Keine Eggli bei Footer */
/* Keine Eggli bei Navi */
.shadow-left, .shadow-right,
.feckl, .feckr,
.heckl, .heckr {
display: none;
}
/* Keinen Rahmen beim Subfooter, kann in Template nicht ausgeschaltet werden */
#foot_container {
border: none;
}
/* Footer ohne Schatten */
.module .chrome-border {
&.left-bottom, &.left-top,
&.right-bottom, &.right-top {
background-image: none;
}
}
/* keine Pfeile up to top */
.footer-inner {
display: none;
}
/* bei schwarz background image ausschalten */
#header,
#maincontent,
#footer {
background-image: none;
}
#topmenu ul.menu {
/* bei Navi Linien weg und vom Banner nach unten schieben, padding-left verschiebt navi nach rechts, Hintergrundbild weg*/
background-image: none;
border: none;
padding-top: 50px;
/* bei Navi Schaltflächen mehr auseinander, boderstyle Ändern, evt. mit display spielen */
display: flex;
flex-direction: row;
justify-content: space-between;
/* bei Navi Hintergrund einzelner Menupunkte einfärben und grösse anpassen */
li.item-101 > a {
background-color: #FF4000;
}
li.item-107 > a {
background-color: #FFFF00;
}
li.item-108 > a {
background-color: #01DF01;
}
li.item-109 > a {
background-color: #00BFFF;
}
li.item-110 > a {
background-color: #DA81F5;
}
> li {
> a, > span.separator {
text-align: center;
width: 100px;
border: none;
}
}
/* bei Navi Schrift ohne Schatten */
/* bei Navi Hintergrundbild weg */
/*** Text-Shadow kann mit CSS3-Effects deaktiviert werden ***/
li a, li span.separator {
text-shadow: none;
background-image: none;
}
}
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
8 Jahre 3 Monate her - 8 Jahre 3 Monate her #2782
von Bea
Bea antwortete auf Menu zentrieren und in mobilier Ansicht verbessern
Matthias, was soll ich dazu sagen: Danke!!! Jetzt kapier ich das auch langsam mit dem Zusammenfassen 
Letzte Änderung: 8 Jahre 3 Monate her von Bea.
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
8 Jahre 3 Monate her - 8 Jahre 3 Monate her #2783
von Bea
Bea antwortete auf Menu zentrieren und in mobilier Ansicht verbessern
@Thomas
Zu Punkt 3. Habe das mal in der less so eingegeben. Wenn ich aber mit dem Handy und dem Chrome die Seite aufrufe, habe ich noch immer einen schwarzen Balken. Dann erst, wenn ich drauf klicke, kommt nun das rote Hamburger-Symbol angezeigt. Nur müsste das doch grad von Anfang an kommen. Wie krieg ich das hin?
Gibts für die Handyansicht auch sowas wie Firebug? Also dass ich irgendwie ein Handy immitieren kann und dann so den CSS-Code untersuchen könnte?
(Hab den Code wie von Matthias vorgeschlagen noch nicht geändert, will beide Varianten zuerst ausdrucken und vergleichen, nur so lerne ich dazu )
Und beim Template kann man bei Layout noch sowas wählen: mobile view for ...... Ich habe dort mal Phones aktiviert. Aber was bedeutet diese Option?
Zu Punkt 3. Habe das mal in der less so eingegeben. Wenn ich aber mit dem Handy und dem Chrome die Seite aufrufe, habe ich noch immer einen schwarzen Balken. Dann erst, wenn ich drauf klicke, kommt nun das rote Hamburger-Symbol angezeigt. Nur müsste das doch grad von Anfang an kommen. Wie krieg ich das hin?
Gibts für die Handyansicht auch sowas wie Firebug? Also dass ich irgendwie ein Handy immitieren kann und dann so den CSS-Code untersuchen könnte?
(Hab den Code wie von Matthias vorgeschlagen noch nicht geändert, will beide Varianten zuerst ausdrucken und vergleichen, nur so lerne ich dazu
)Und beim Template kann man bei Layout noch sowas wählen: mobile view for ...... Ich habe dort mal Phones aktiviert. Aber was bedeutet diese Option?
Letzte Änderung: 8 Jahre 3 Monate her von Bea.
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
- Thomas Hunziker
-
- Offline
- Administrator
-
Ladezeit der Seite: 0.224 Sekunden